<template>
  <!-- 营销项目计划管理提报 -->
  <div>
    <!-- 查询 -->
    <commonFilter ref="commonFilter" @filterChange="changeHandle" @onCollapse="collapseHandle" />
    <!-- 列表 -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :isSelectColumn="false"
      :onColumnsChange="columns => this.columns = columns"
      columnsRef="projectOperating_plan_inquire_indexOem_01"
    >
      <template slot="controls">
        <el-button
          size="small"
          :loading="downLoading"
          type="primary"
          icon="el-icon-download"
          @click="exportExcel()"
        >下载</el-button>
      </template>
    </FilterTable>
    <!-- 弹窗 -->
    <Drawer
      ref="infoDrawer"
      :visible.sync="visibleDrawer"
      title="项目计划提报明细"
      destroyOnClose
      :containerStyle="{width:'70vw',height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <details-form :options="detailsConfig" @close="closeDrawer" />
    </Drawer>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { region } from '@/api/cms-common/region';
import { exportExcelFile } from '@/utils';
import commonFilter from '../commonFilter/indexOem';
import detailsForm from '../approvalDetails/indexOem';
import { findPageOem, exportExcel } from '@/api/cms-api/projectOperating/plan';
import * as types from '@/api/cms-api/projectOperating/plan/types';

export default {
  mixins: [dictionary, region],
  components: {
    commonFilter,
    detailsForm
  },
  data() {
    return {
      columns: this.creatColumns(),
      fetchApi: findPageOem,
      fetchParams: {},
      visibleDrawer: false,
      downLoading: false,
      detailsConfig: {}
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    //打开窗口
    drawerHandle(row, type) {
      let id = -1;
      if (type != 'add') {
        id = row.planId;
      }
      this.detailsConfig = {
        id: id, //表主键
        formType: type
      };
      this.visibleDrawer = true;
    },
    //关闭窗口
    closeDrawer(data) {
      this.visibleDrawer = false;
      if (data.type === 'refresh') {
        // 重新加载表格数据
        this.fetchParams = { ...this.fetchParams };
      }
    },
    //当搜索按钮按下后会触发
    changeHandle(val) {
      if (!val) {
        val = { planStartDate: [], activityMonth: [] };
      }
      
      this.fetchParams = Object.assign(
        {
          planStartDateBegin: val.planStartDate[0] || undefined,
          planStartDateEnd: val.planStartDate[1] || undefined,
          activityMonthBegin: val.activityMonth[0] || undefined,
          activityMonthEnd: val.activityMonth[1] || undefined
        },
        val
      );
    },
    //展开收起搜索框触发
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    //导出
    async exportExcel() {
      let r = await this.$refs.commonFilter.$refs.commonTopFilter.GET_FORM_DATA();
      let p = null;
      if (r != null && r.length > 1) {
        p = r[1];
      }
      
      p = Object.assign(p, { projectProgramId: this.$refs.commonFilter.projectProgramId, modelIdList: this.$refs.commonFilter.modelIdList, ownerCode: this.$refs.commonFilter.dealerCode });
      p = Object.assign(
        {
          planStartDateBegin: p.planStartDate[0] || undefined,
          planStartDateEnd: p.planStartDate[1] || undefined,
          activityMonthBegin: p.activityMonth[0] || undefined,
          activityMonthEnd: p.activityMonth[1] || undefined
        },
        p
      );
      
      this.downLoading = true;
      // this.$refs.commonFilter.$refs.commonTopFilter.excuteFormData(this.$refs.commonFilter.$refs.commonTopFilter.form);
      // let params = this.$refs.commonFilter.$refs.commonTopFilter.form;
      exportExcel(p).then(res => {
        exportExcelFile(res.data, '营销项目计划查询');
        this.downLoading = false;
      });
    },
    //创建表格列配置
    creatColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          fixed:"left",
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 100,
          fixed: 'left',
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.drawerHandle(props.row, 'show')}>
                  明细
                </el-button>
              </div>
            );
          }
        },
        { title: '事业部', dataIndex: 'orgName',sorter: true },
        {
          title: '省份',
          dataIndex: 'provinceId',
          sorter: true,
          render: props => {
            return <span>{this.createRegionText(props.row.provinceId)}</span>;
          }
        },
        {
          title: '城市',
          dataIndex: 'cityId',
          sorter: true,
          render: props => {
            return <span>{this.createRegionText(props.row.cityId)}</span>;
          }
        },
        { title: '经销商代码', dataIndex: 'ownerCode',sorter: true },
        { title: '经销商名称', dataIndex: 'dealerName',sorter: true },
        { title: '项目大类', dataIndex: 'projectMainClassName', sorter: true },
        { title: '项目小类', dataIndex: 'projectSmallClassName', sorter: true },
        {
          title: '项目月份',
          dataIndex: 'activityMonth',
          sorter: true,
          // render: props => {
          //   return <span>{this.formatDatesNoDay(props.row.activityMonth)} </span>;
          // }
          dateFormat: 'YYYY年MM月'
        },
        { title: '预算类别', dataIndex: 'budgetType',  sorter: true,
            render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.budgetType, '8052')}</span>;
        } },
        { title: '方案名称', dataIndex: 'programName', sorter: true },
        { title: '项目编号', dataIndex: 'planCode', sorter: true},
        { title: '项目名称', dataIndex: 'projectName', sorter: true },
        { title: '项目地点', dataIndex: 'planProjectLocation', sorter: true},
        { title: '项目介绍（项目描述）', dataIndex: 'projectDesc', sorter: true},
        { title: '项目车型', dataIndex: 'modelLists', sorter: true},
        { title: '计划开始日期', dataIndex: 'planStartDate', sorter: true, dateFormat: 'YYYY年MM月DD日'},
        { title: '计划结束日期', dataIndex: 'planEndDate', sorter: true, dateFormat: 'YYYY年MM月DD日'},
        { 
            title: '计划支持场次、天数', 
            dataIndex: 'planTimeDay', 
            sorter: true,
        },
        { title: '合作方式', dataIndex: 'cooperationMethod', sorter: true ,
          render: props => {
              return <span>{this.createDictText(props.row.cooperationMethod, '2532')}</span>;
          }
        },
        { title: '集客目标', dataIndex: 'targetGuestsNum', sorter: true},
        { title: '目标留档', dataIndex: 'targetRetentionNum', sorter: true},
        { title: '目标订单', dataIndex: 'targetOrderNum', sorter: true},
        { title: '场地（室内/室外）+面积', dataIndex: 'planProjectSite', sorter: true},
        { title: '展位计划金额', dataIndex: 'planBoothAmount', sorter: true},
        { title: '展位批准金额', dataIndex: 'realBoothAmount', sorter: true},
        { title: '搭建运营计划金额', dataIndex: 'planBuildAmount', sorter: true},
        { title: '搭建运营批准金额', dataIndex: 'realBuildAmount', sorter: true},
        { title: '计划项目金额', dataIndex: 'planProjectAmount', sorter: true, numberFormat: true },
        { title: '计划批准金额', dataIndex: 'planApproveAmount', sorter: true, numberFormat: true },
        {
          title: '计划核销比例',
          dataIndex: 'planCancellationRatio',
          sorter: true,
          render: props => {
            if (props.row.planCancellationRatio == null) {
              return <span slot="append">{props.row.planCancellationRatio}</span>;
            } else {
              return <span slot="append">{props.row.planCancellationRatio}%</span>;
            }
          }
        }
        
      ];
    }
  }
};
</script>

<style scoped>
</style>
